<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>弹性盒模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        /*
            主轴
                - 主轴就是弹性子元素排列方向
                - 如何设置主轴方向：
                    flex-direction
                        可选值：
                            row 主轴是自左向右水平排列
                            column 主轴是自上向下垂直排列
                            row-reverse 主轴是自右向左水平排列
                            column-reverse 主轴是自下向上垂直排列
                 - 设置元素是否换行
                    flex-wrap
                        可选值：
                            nowrap 元素不会自动换行
                            wrap 自动换行
                            wrap-reverse 反向换行

                    flex-flow：
                        flex-direction 和 flex-wrap的简写属性
                            可以同时设置两个样式并且没有顺序和数量的要求

            侧轴（辅轴）
                - 侧轴是与主轴垂直方向的轴





        */

        ul{
            display: flex;
            width: 800px;
            border: 10px red solid;
        }
        /*
            弹性子元素的样式（弹性项的样式）
                flex-basis
                    - 弹性子元素的基础大小，会根据主轴的方向自动设置width或height
                        主轴水平，设置宽度
                        主轴垂直，设置高度
                    - 可选值：
                        auto 默认值 以元素width或height为准
                flex-shrink
                    - 弹性子元素的收缩系数
                        当父元素容纳不下所有子元素时，如何自动缩小元素大小
                    - 元素的收缩是根据flex-basis和flex-shrink综合计算的
                        收缩系数越大，元素基础大小越大，元素就缩的越多
                    - 默认值为1，可以根据需要设置，如果设置为则表示不收缩
                flex-grow
                    - 弹性子元素的生长系数
                    - 当容器中有富余空间时，如果分配到子元素
                    - 默认值0，元素默认不会变大

                flex
                    - 上述三个属性的简写属性
                    - 属性顺序：
                        grow shrink basis
                    - 可选值：
                        initial 默认值 0 1 auto
                        auto 相当于 1 1 auto
                        none 相当于 0 0 auto



        */

        li{
            width: 100px;
            line-height: 100px;
            font-size: 50px;
            color: #fff;
            text-align: center;

            /*flex-basis: auto;*/
            /*flex-shrink: 1;*/

            flex: none ;
        }

        li:nth-child(1){
            background-color: #bfa;
        }

        li:nth-child(2){
            background-color: orange;
        }

        li:nth-child(3){
            background-color: yellowgreen;
        }

        li:nth-child(4){
            background-color: tomato;
        }

        li:nth-child(5){
            background-color: skyblue;
        }


    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>



</body>
</html>